<template>
  <a-drawer
    v-model:visible="vdata.visible"
    :mask-closable="false"
    :title="vdata.isAdd ? '新增二维码' : '修改二维码' "
    width="40%"
    @close="onClose"
  >
    <a-form v-if="vdata.visible" ref="infoFormModel" :model="vdata.saveObject" :rules="saveRule">
      <a-row v-if="$access('ENT_MCH_APP_LIST')" justify="space-between" type="flex">
        <a-form-item label="二维码应用" name="appId">
          <a-select v-model:value="vdata.saveObject.appId" placeholder="选择应用">
            <a-select-option v-for="(item) in vdata.mchAppList" :key="item.appId">{{ item.appName }} [{{ item.appId }}]</a-select-option>
          </a-select>
        </a-form-item>
      </a-row>

      <a-row v-if="$access('ENT_MCH_STORE_LIST')" justify="space-between" type="flex">
        <a-form-item label="选择门店" name="storeId">
          <a-select v-model:value="vdata.saveObject.storeId" placeholder="请选择门店">
            <a-select-option v-for="d in vdata.storeList" :key="d.storeId" v-model:value="d.storeId">
              {{ d.storeName }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-row>

      <a-row>
        <a-form-item label="二维码名称" name="qrcAlias">
          <a-input v-model:value="vdata.saveObject.qrcAlias" placeholder="请输入二维码名称" />
        </a-form-item>
      </a-row>

      <a-row>
        <a-form-item label="状态" name="qrcState">
          <a-radio-group v-model:value="vdata.saveObject.qrcState">
            <a-radio :value="1">启用</a-radio>
            <a-radio :value="0">禁用</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-row>

      <a-row>
        <a-form-item label="固定金额" name="fixedFlag">
          <a-radio-group v-model:value="vdata.saveObject.fixedFlag">
            <a-radio :value="0">任意金额</a-radio>
            <a-radio :value="1">固定金额</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item v-if="vdata.saveObject.fixedFlag" label="" name="fixedPayAmount">
          <a-input-number v-model:value="vdata.saveObject.fixedPayAmount" :precision="2" style="width: 130px" /> 元
        </a-form-item>
      </a-row>

      <a-row>
        <a-form-item v-if="vdata.isAdd" label="选择页面类型" name="entryPage">
          谨慎选择， 一经填写不可变更。
          <a-radio-group v-model:value="vdata.saveObject.entryPage">
            <a-radio :value="'default'">默认(未指定，取决于二维码是否绑定到微信侧)</a-radio>
            <a-radio :value="'h5'">固定H5页面</a-radio>
            <a-radio :value="'lite'">固定小程序页面</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-row>

      <a-row>
        <a-form-item label="支付宝支付方式(仅H5呈现时生效)" name="alipayWayCode">
          <a-radio-group v-model:value="vdata.saveObject.alipayWayCode">
            <a-radio :value="'ALI_JSAPI'">ALI_JSAPI</a-radio>
            <a-radio :value="'ALI_WAP'">ALI_WAP</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-row>
    </a-form>

    <div class="drawer-btn-center">
      <a-button :style="{ marginRight: '8px' }" style="margin-right:8px" @click="onClose"><close-outlined />取消</a-button>
      <a-button type="primary" @click="handleOkFunc"><check-outlined />保存</a-button>
    </div>
  </a-drawer>
</template>

<script lang="ts" setup>

import {API_URL_MCH_QR_CODE_LIST, API_URL_MCH_APP, API_URL_MCH_STORE_LIST, req} from '@/api/manage'
import {defineProps, reactive, ref, getCurrentInstance} from 'vue'
const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties


// 定义组件参数
const props = defineProps({
  callbackFunc: {type: Function, default: () => {}}
})

// 定义ref对象
const infoFormModel = ref()

const saveRule = {
  appId: [{ required: true, message: '请选择应用', trigger: 'blur' }],
  storeId: [{ required: true, message: '请选择门店', trigger: 'blur' }],
  fixedPayAmount: [{ required: true, message: '请输入固定金额', trigger: 'blur', type: 'number', min: 0.01 }],
}


const vdata = reactive({

  isAdd: true, // 新增 or 修改页面标志
  recordId: null, // 更新对象ID
  visible: false, // 是否显示弹层/抽屉
  saveObject: {} as any, // 数据对象

  mchAppList: [] as any, // 商户应用的List
  storeList: [] as any, // 商户门店的List
})


// 弹层打开事件
function show(recordId) {

  vdata.isAdd = !recordId
  vdata.saveObject = {qrcState: 1, fixedFlag: 0, entryPage: 'default', alipayWayCode: 'ALI_JSAPI' } // 重置清空

  //更新商户的应用列表
  if($access('ENT_MCH_APP_LIST')){
    req.list(API_URL_MCH_APP, { pageSize: -1 }).then(res => {
      vdata.mchAppList = res.records
    })
  }
  
  //更新商户的门店列表
  if($access('ENT_MCH_STORE_LIST')){
    req.list(API_URL_MCH_STORE_LIST, { 'pageSize': -1 }).then(res => {
    vdata.storeList =  res.records
  })
  }

  // 重置表单验证规则
  if (infoFormModel.value != undefined) {
    infoFormModel.value.resetFields()
  }

  // 修改弹层
  if (!vdata.isAdd) { // 修改信息 延迟展示弹层
    vdata.recordId = recordId
    req.getById(API_URL_MCH_QR_CODE_LIST, recordId).then(res => {
      vdata.saveObject = res
      vdata.saveObject.fixedPayAmount = vdata.saveObject.fixedPayAmount / 100
      vdata.visible = true
    })
  } else {
    vdata.visible = true // 立马展示弹层信息
  }
}

// 点击 【保存】按钮的事件
function handleOkFunc(){

  infoFormModel.value.validate().then(() => {

    if(vdata.isAdd){

      req.add(API_URL_MCH_QR_CODE_LIST, vdata.saveObject).then( res => reqSuccessFunc() )

    }else{

      req.updateById(API_URL_MCH_QR_CODE_LIST, vdata.recordId, vdata.saveObject).then( res => reqSuccessFunc() )
    }
  })

}

// 接口请求成功的处理函数
function reqSuccessFunc(){
  $infoBox.message.success( vdata.isAdd ? '新增成功' : '更新成功')
  vdata.visible = false
  props.callbackFunc() // 刷新列表
}


function onClose() {
  vdata.visible = false
}


defineExpose({show})
</script>
